<template>
  <div id="main" style="width: 100%;">

    <div class="app-container" style="margin-left: 20%;margin-top: 3%;width: 300px;float: left">
      <el-button @click="getArtilceListByClassesId(1,0)" type="success" size="small" style="margin-bottom: 10px;margin-right:5px">简单</el-button>
      <el-button @click="getArtilceListByClassesId(1,1)" type="primary" size="small" style="margin-bottom: 10px;margin-right:5px">中等</el-button>
      <el-button @click="getArtilceListByClassesId(1,2)" type="danger" size="small" style="margin-left:5px;margin-right:5px">困难</el-button>
      <el-input v-model="filterText" placeholder="keyword" style="margin-bottom:10px;" />

      <el-tree
        ref="tree"
        :data="data"
        node-key="title"
        @node-click="handleNodeClick"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="filter-tree"
      />
    </div>

    <div style="float: left">
      <!--文章-->
      <div style="margin-left:15%; margin-top: 5%; margin-bottom: 5%">
        <el-collapse v-for="(article, i) in articleList" :key="i" accordion style="width: 800px;">
          <el-collapse-item>
            <template slot="title">
              {{ i+1 }}、{{ article.title }}
              &nbsp;
              <h5 v-show="article.difficulty===0" style="font-size: 12px;color: #00AF9B">简单</h5>
              <h5 v-show="article.difficulty===1" style="font-size: 12px;color: #FFB800">中等</h5>
              <h5 v-show="article.difficulty===2" style="font-size: 12px;color: #FF2D55">困难</h5>
              &nbsp;
              <h5 v-show="i<3 && page===1" style="font-size: 10px;color: #dd1100">&nbsp;{{ article.viewNum }}次浏览【new】</h5>
              <h5 v-show="i>2 || page!==1" style="font-size: 10px;color: magenta">&nbsp;{{ article.viewNum }}次浏览</h5>
            </template>
            <div style="color: darkgreen">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ article.summary }}

<!--              <a :href="'/article/'+article.id" target="_blank">-->
<!--                <el-link type="warning">详情</el-link>-->
<!--              </a>-->
              <a target="_blank">
                <el-link type="warning" @click="openArticleDetail(article.id)">详情</el-link>
              </a>

              <p class="font-content" v-html="article.content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ article.content }}</p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 分页 -->
      <div style="height: 60px;width: 450px; margin: 0 auto" v-show="articleList.length>0">
        <el-pagination
          @current-change="getArtilceListByClassesId"
          :current-page="page"
          :page-sizes="pageSizes"
          :page-size="limit"
          style="margin: 0 auto; position: center;"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      <!--回到顶部-->
      <div>
        <template>
          <el-backtop></el-backtop>
        </template>
      </div>
    </div>

    <!-- 弹窗 -->
<!--    <div>-->
<!--      <el-dialog :visible.sync="dialogVisible" width="60%">-->

<!--        <div style="overflow:hidden;">-->
<!--          &lt;!&ndash;上左下右裁剪宽度&ndash;&gt;-->
<!--          <div style="margin:-10% 0% -20% 0%;">-->
<!--            <iframe :src="'/article/'+articleId" width="100%" height="1300"></iframe>-->
<!--          </div>-->
<!--        </div>-->

<!--      </el-dialog>-->
<!--    </div>-->
    <div style="background-color: #00abf2">
      <el-dialog :visible.sync="dialogVisible" width="60%">
        <div style="overflow:hidden;">
          <div>
            <div class="separation">
              <h1 v-show="article.difficulty===0" class="font-title-easy">{{ article.title }}</h1>
              <h1 v-show="article.difficulty===1" class="font-title-medium">{{ article.title }}</h1>
              <h1 v-show="article.difficulty===2" class="font-title-hard">{{ article.title }}</h1>
            </div>
            <div class="separation">
              <h2 class="font-summary">一一{{ article.summary }}</h2>
            </div>
            <div class="separation">
              <h2 class="font-gmtModified">一最后修改时间: {{ article.gmtModified }}</h2>
            </div>
            <div class="separation" v-highlight>
              <p v-html="article.content">{{ article.content }}</p>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import articleApi from '@/api/article'
export default {
  data() {
    return {
      articleId: "",
      classPageFlag: -1,

      // 分页
      page: 1, // 当前页
      limit: 10, // 每页记录数
      total: 0, // 总条数
      pageSizes: [10,20,50,9999], // 每页记录数
      articleList: [],

      // 弹出框
      dialogVisible: false,
      // 分类
      filterText: '',
      data: [], // 返回所有分类
      defaultProps: {
        children: 'children',
        label: 'title'
      },

      article: {
        difficulty: 0,
        summary: "",
        gmtModified: "",
        content: "",
        title: ""
      }
    }
  },
  created() {
    this.getAllArticleClasses()
    //获取默认列表
    this.getArtilceListByClassesId()
  },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },

  methods: {

    // 详情页面
    openArticleDetail(articleId) {
      this.articleId = articleId
      this.getArticleInfoById()
      this.dialogVisible = true
      this.getViewNumOrAddViewNumById()
    },

    // 根据分类查询数据
    getArtilceListByClassesId(page=1, articleClassesId=-1) {
      if (articleClassesId !== -1) {
        this.classPageFlag = articleClassesId
      }
      this.page = page // 分页修改参数
      //this.limit = 100000
      console.log("=====分页标志====")
      console.log(this.classPageFlag)
      console.log("=====页码====")
      console.log(this.page)
      articleApi.getArtilceListByClassesId(this.page, this.limit, this.classPageFlag)
        .then(response => {
          this.articleList = response.data.data.items
          this.total = response.data.data.total
        })
    },

    // 点击树形节点跳转查看分类列表
    handleNodeClick (node, e) {

      let isLeaf = e.isLeaf
      let nodeId = node.id
      // 叶子节点，代表二级分类
      if (isLeaf) {
        // 二级分类
        this.getArtilceListByClassesId(1, nodeId)
      }
    },

    getAllArticleClasses() {
      articleApi.getAllArticleClasses()
        .then((response) => {
          this.data = response.data.data.list
        })
    },

    filterNode(value, data) {
      if (!value) return true
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
    },

    getList(page = 1) {
      this.page = page // 分页修改参数
      articleApi.getPageArticle(this.page, this.limit)
        .then(response => {

          console.log("============获取文章页列表============")
          console.log(response.data.data)

          this.articleList = response.data.data.items
          this.total = response.data.data.total

        })
    },

    // 查询文章内容
    getArticleInfoById() {
      articleApi.getArticleInfoById(this.articleId)
        .then(response => {
          this.article = response.data.data.article
          console.log("===========获取文章===========")
          console.log(this.article)
        })
    },

    //增加获取并当前浏览数
    getViewNumOrAddViewNumById() {
      console.log("=====文章阅读数====")
      articleApi.getViewNumOrAddViewNumById(this.articleId,0)
        .then(response => {
          if (response.data.success === true) {
            this.article = response.data.data.article
            this.viewNum = response.data.data.article.viewNum
            this.viewNum = this.viewNum + 1
            articleApi.addRecord()
            articleApi.getViewNumOrAddViewNumById(this.articleId,1)
            this.$message({
              message: "您是该文章第" + this.viewNum + "位阅读者",
              type: "success"
            })
          }
        })
    }
  }
}
</script>

<style scoped>
/deep/ .el-collapse-item__header {
  display: flex;
  align-items: center;
  height: 48px;
  line-height: 20px;
  padding: 0px 5px;
  background-color: transparent;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  transition: border-bottom-color .3s;
  outline: none;
  color: #2440BC;
}

/deep/ .el-collapse-item__content {
  padding-bottom: 10px;
  padding-left: 5px;
  font-size: 14px;
  color: #191e34;
  line-height: 1.769230769230769;
}

#main::after{
  content: "";
  display: block;
  clear: both;
}
</style>
<style>
.font-content {
  font-size: large;
  margin-top: 30px;
  margin-left: 4%;
  margin-right: 4%;
}
.font-title {
  font-family: "微软雅黑";
  text-align: center;
  font-size: 25px;
  padding-top: 30px;
  margin-bottom: 20px;
}
.font-title-easy {
  font-family: "微软雅黑";
  text-align: center;
  font-size: 25px;
  padding-top: 30px;
  margin-bottom: 20px;
  color: #00AF9B;
}
.font-title-medium {
  font-family: "微软雅黑";
  text-align: center;
  font-size: 25px;
  padding-top: 30px;
  margin-bottom: 20px;
  color: #FFB800;
}
.font-title-hard {
  font-family: "微软雅黑";
  text-align: center;
  font-size: 25px;
  padding-top: 30px;
  margin-bottom: 20px;
  color: #FF2D55;
}
.font-summary {
  color: #76839b;
  font-size: small;
  margin-left: 850px;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 2em;
}
.font-gmtModified {
  color: #76839b;
  font-size: small;
  margin-left: 900px;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 2em;
}
.font-content {
  font-size: large;
  margin-top: 50px;
  margin-left: 6%;
  margin-right: 6%;
}

.separation pre {
  margin-left: 12%;
  margin-right: 12%;
}

.separation p {
  font-size: large;
  color: #0c72f0;
}

.separation {
  border-bottom: 1px solid rgb(103, 197, 154);
}
</style>
